<template>
	<view class="content">
		<u-navbar title="个人资料" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>
		<view class="personal_content" v-if="pageShow">
			<view class="personal_hade" @click="upload">
				<view class="personal_hade_img">
					<image :src="userInfo.avatar" mode=""></image>
					<view class="camera_img">
						<image src="/static/images/personal-data/Group 41@2x.png" mode=""></image>
					</view>
				</view>
			</view>
			<view v-show="false" class="">
				<u-upload width="0" height="0" ref="upload" uploadIcon="" id="updata" :previewImage="false" accept='image'
					:fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
			</view>

			<view class="info_list">
				<view class="info_title">
					个人信息
				</view>
				<view @click="nickname_show = true" class="info_item">
					<view class="info_item_left">
						昵称
					</view>
					<view class="info_item_right">
						{{userInfo.name}}
						<image src="/static/images/mine/图标@2x.png" mode=""></image>
					</view>
				</view>
				<!-- @click="number_show = true" -->
				<view class="info_item">
					<view class="info_item_left">
						手机号
					</view>
					<view class="info_item_right">
						{{userInfo.phone}}
						<u-icon name="lock" color="#777777" size="32rpx"></u-icon>
						<!-- <image src="/static/images/mine/图标@2x.png" mode=""></image> -->
					</view>
				</view>
				<view class="info_item">
					<view class="info_item_left">
						ID号
					</view>
					<view class="info_item_right">
						<!-- {{userInfo.id}} -->
						1000

						<u-icon name="lock" color="#777777" size="32rpx"></u-icon>
					</view>
				</view>
				<view class="info_item" v-if="employeeIsLogin">
					<view class="info_item_left">
						账号绑定
					</view>
					<view class="info_item_right">
						{{userInfo.isSysuserid}}
						<u-icon name="lock" color="#777777" size="32rpx"></u-icon>
					</view>
				</view>
				<view @click="showAccount" v-else class="info_item">
					<view class="info_item_left">
						账号绑定
					</view>
					<view class="info_item_right">
						<image src="/static/images/mine/图标@2x.png" mode=""></image>
					</view>
				</view>
				<view @click="show = true" class="info_item">
					<view class="info_item_left">
						所属部门
					</view>
					<view class="info_item_right">
						总店
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="nickname_show" round="20" mode="center" @close="close" @open="open">
			<view class="form">
				<view class="form_title">
					更改昵称
				</view>
				<view class="form_content">
					<view class="form_item">
						<view class="form_name">
							昵称:
						</view>
						<u--input placeholder="请输入内容" border="surround" v-model="nickname"></u--input>
					</view>
				</view>
				<view class="choice">
					<u-button :customStyle="customStyle" @click='nickname_show = false'>取消</u-button>
					<u-button :customStyle="customStyle" @click='nameReuls'>确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="number_show" round="20" mode="center" @close="close" @open="open">
			<view class="form">
				<view class="form_title">
					更换手机号
				</view>
				<view class="form_content">
					<view class="form_item">
						<view class="form_name">
							手机号:
						</view>
						<u--input placeholder="请输入手机号" border="surround" v-model="number"></u--input>
					</view>
				</view>
				<view class="choice">
					<u-button :customStyle="customStyle" @click='number_show = false'>取消</u-button>
					<u-button :customStyle="customStyle" @click='poneReuls'>确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="account_show" round="20" mode="center" @close="close" @open="open">
			<view class="form">
				<view class="form_title">
					账号绑定
				</view>
				<view class="form_content">
					<view class="form_item">
						<view class="form_name">
							账号：
						</view>
						<u-input v-model="employee.empInfo.username" placeholder="请输入crm账号" border="surround"></u-input>
					</view>
					<view class="form_item">
						<view class="form_name">
							密码：
						</view>
						<u-input password v-model="employee.empInfo.password" placeholder="请输入crm密码" border="surround"></u-input>
					</view>
					<!-- <view class="form_item">
						<view class="form_name">
							分公司：
						</view>
						<u--input placeholder="请选择分公司" border="surround" v-model="account.company" @change="change"></u--input>
					</view> -->
				</view>
				<view class="choice">
					<u-button :customStyle="customStyle" @click='hideAccount'>取消</u-button>
					<u-button :customStyle="customStyle" @click='login'>确定</u-button>
				</view>
			</view>
		</u-popup>
		<view class="save" @click="saveInfo">
			保存
		</view>
	</view>
</template>

<script>
	import {
		userInfo,
		alterUser
	} from '../../api/mine.js'
	import {
		bindcrm,
		empLogin,
		getEmployeeInfo
	} from '../../api/employee.js'
	import baseUrl from '../../utils/base.js'
	import upload from '../../uni_modules/uview-ui/libs/config/props/upload.js'
	export default {
		onLoad(option) {
			// console.log(option.);
			this.getUserInfo(option.id)
			// if (this.$store.state.employeeIsLogin) {
			// 	this.employeeIsLogin = true
			// }
		},
		computed: {
			employeeIsLogin() {
				// return this.$store.commit('setEmployeeIsLogin', false)
				return this.$store.state.employeeIsLogin
			}
		},
		data() {
			return {
				account_show: false,
				// employeeIsLogin: false,
				employee: {
					empInfo: {
						username: '',
						password: '',
					},
				},
				show: false,
				titleStyle: {
					color: '#fff'
				},
				fileList1: [],
				account: {},
				nickname: '',
				number: '',
				customStyle: {
					backgroundColor: 'transparent',
					border: '0',
					height: '100%'
				},

				nickname_show: false,
				number_show: false,

				userInfo: {
					name: '未登录',
					id: 0,
					avatar: '/static/images/factionalism/user_hadeimg.jpg',
				},
				pageShow: false
			}
		},
		methods: {
			// async bindCrm(data){
			// 	const res = await bindcrm(data)
			// 	console.log(res);
			// }
			showAccount() {
				this.account_show = true
			},
			hideAccount() {
				this.account_show = false
			},
			async login() {
				console.log(this.employee);
				if (this.employee.empInfo.username != '' && this.employee.empInfo.password != '') {
					console.log(this.employee.empInfo);
					const res = await empLogin(this.employee.empInfo)
					console.log(res);
					if (res.code != 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
					uni.setStorageSync('employee', res.token)
					this.$store.commit('setEmployee', res.token)
					this.$store.commit('setEmployeeIsLogin', true)
					const _this = this

					const infoRes = await getEmployeeInfo()
					console.log(infoRes);
					if (infoRes.code == 200) {
						uni.setStorageSync('employeeInfo', JSON.stringify(infoRes.user))
						_this.$store.commit('setEmployeeInfo', infoRes.user)
					}
					const bindRes = await bindcrm({
						userId: this.userInfo.id,
						employeeId: infoRes.user.userId
					})
					if (bindRes.code == 200) {
						return this.$store.commit('setEmployeeIsLogin', true)
						uni.showToast({
							title: '绑定成功',
							success: () => {
								this.account_show = false
							}
						})
						return
					}
					if (!this.userInfo.isSysuserid) {
						uni.showToast({
							title: bindRes.msg,
							icon: 'none'
						})
						return
					}
					uni.showToast({
						title: '绑定成功',
					})
					this.account_show = false
					return this.$store.commit('setEmployeeIsLogin', true)
					return
				}
				uni.showToast({
					title: '账号密码必填',
					icon: 'error'
				})

			},
			// 获取用户信息
			async getUserInfo(id) {
				const res = await userInfo(id)
				// console.log(res);
				this.userInfo = res.data
				this.nickname = res.data.name
				this.number = res.data.phone
				this.pageShow = true
			},
			upload() {
				this.$refs.upload.chooseFile()
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			nameReuls() {
				if (this.nickname.length >= 1) {
					this.nickname_show = false;
					this.userInfo.name = this.nickname
				} else {
					uni.showToast({
						title: '请输入至少一个字符',
						icon: 'error'
					})
				}
			},
			poneReuls() {
				if (this.number.length >= 11) {
					this.number_show = false;
					this.userInfo.phone = this.number
				} else {
					uni.showToast({
						title: '请输入11位手机号',
						icon: 'error'
					})
				}
			},
			async uploadImage(url) {
				// console.log(res);
				// console.log(this.userInfo);/*  */
			},
			async saveInfo() {
				if (this.fileList1[0]) {
					const file = await this.uploadFilePromise(this.fileList1[0].url)
					this.userInfo.avatar = JSON.parse(file).msg
					// console.log(this.userInfo);
				}
				this.alterUserInfo(this.userInfo)
			},
			// 修改当前用户信息 
			async alterUserInfo(data) {
				const res = await alterUser(data)
				// console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '修改成功',
						success() {
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/mine/mine'
								})
							}, 1000)
						}
					})
					return
				}
				uni.showToast({
					title: '修改失败',
					icon: 'error'
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				this.fileList1 = []
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				// let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this.userInfo.avatar = item.url
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						// message: '上传中'
					})
				})
			},
			uploadFilePromise(url) {
				if (url) {
					return new Promise((resolve, reject) => {
						let a = uni.uploadFile({
							url: baseUrl + '/common/uploadOss',
							filePath: url,
							header: {
								authentication: this.$store.getters.getUserInfo.token
							},
							name: 'file',
							formData: {
								user: 'test'
							},
							success: (res) => {
								setTimeout(() => {
									resolve(res.data)
								}, 1000)
							}
						});
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #FF594D;
		height: 100vh;
		// padding-top: 35rpx;
		box-sizing: border-box;

		.u-safe-area-inset-bottom {
			padding-bottom: 0;
		}

		.personal_content {
			height: 100%;
			background-color: #fff;
			border-radius: 100rpx 100rpx 0 0;

			.personal_hade {
				height: 340rpx;
				box-sizing: border-box;
				padding: 76rpx 0 0 296rpx;

				.personal_hade_img {
					width: 159rpx;
					height: 159rpx;
					background: #F4DDDD;
					// overflow: hidden;
					border-radius: 297rpx 297rpx 297rpx 297rpx;
					position: relative;

					&>image {
						border-radius: 297rpx 297rpx 297rpx 297rpx;
						overflow: hidden;
						width: 100%;
						height: 100%;
					}

					.camera_img {
						width: 44rpx;
						height: 44rpx;
						background: #FF594D;
						border-radius: 94rpx 94rpx 94rpx 94rpx;
						overflow: hidden;
						position: absolute;
						bottom: -5rpx;
						right: 3rpx;

						image {
							width: 44rpx;
							height: 44rpx;
						}
					}
				}
			}

			.info_list {
				padding: 0 40rpx;

				.info_title {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #000000;
					margin-bottom: 60rpx;
				}

				.info_item {
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx solid #E8E2DF;
					padding: 30rpx 0;

					.info_item_left {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #333332;
					}

					.info_item_right {
						display: flex;
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #777777;
						align-items: center;

						image {
							width: 16rpx;
							height: 32rpx;
							display: block;
							margin-left: 16rpx;
						}
					}
				}
			}
		}

		.form {
			width: 600rpx;



			.form_title {
				height: 88rpx;
				line-height: 88rpx;
				font-size: 30rpx;
				text-align: center;
				font-weight: blod;
				border-bottom: 1px solid #EBEBEB;
			}

			.form_item {
				padding: 28rpx 20rpx 0;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.form_name {
					width: 124rpx;
				}
			}

			.choice {
				border-top: 1px solid #EBEBEB;
				margin-top: 30rpx;
				display: flex;
				font-size: 26rpx;
				position: relative;
				height: 100rpx;
				align-items: center;

				&::after {
					content: '';
					position: absolute;
					height: 88rpx;
					width: 1rpx;
					background-color: #EBEBEB;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		.save {
			width: 600rpx;
			height: 68rpx;
			background: #FF594D;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 68rpx;
			text-align: center;
			position: fixed;
			left: 75rpx;
			bottom: 56rpx;
		}
	}
</style>